<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">

    </div>
</body>
<script src="../react@17.js"></script>
<script src="../react-dom@17.js"></script>
<script src="../babel.js"></script>
<script>
    let age = 10;
   console.log(age<18&&'哈哈哈')
</script>
<script type="text/babel">
    let obj = {
        name:"张三",
        age:9,
        sex:false,
        like:"女",
        phone:110
    }
    let isSex = (sex)=>{
        if(sex){
            return '男'
        }else{
            return '女'
        }
    }
    let ul = (
        <ul>
            <li>{obj.name}</li>
            {
                /* 
                当逻辑运算符两边不全是布尔值时，则左边条件成立时则返回右侧内容，若左边条件不成立则返回false
                */
            }
            <li>{obj.age>=18 && '成年'}
                {(obj.age<18 && obj.age>10) && "小青年"}
                {obj.age<10 && "童年"}
                </li>
            <li>
                {isSex(obj.sex)}    
            </li>
            <li></li>
            <li></li>
        </ul>
    )
    ReactDOM.render(ul,document.getElementById("root"))
</script>
</html>